
<template>
  <view class="container">
    <nut-button style='margin-bottom: 10px' type="primary" size="normal" @click="onClick('primary')">{{ text }}</nut-button>
    <nut-button style='margin-bottom: 10px' type="warning" size="normal" @click="onClick('warning')">{{ textWarning }}</nut-button>
    <nut-button style='margin-bottom: 10px' type="danger" size="normal" @click="onClick('danger')">button</nut-button>
    <nut-button style='margin-bottom: 10px' type="success" size="normal" @click="onClick('success')">button</nut-button>
    <nut-button style='margin-bottom: 10px' plain type="primary">primary</nut-button>
    <nut-button style='margin-bottom: 10px' plain type="warning">warning</nut-button>
    <!-- <nut-button style='margin-bottom: 10px' plain type="danger">danger</nut-button> -->
    <nut-button style='margin-bottom: 10px' plain type="success">success</nut-button>
    <nut-button style='margin-bottom: 10px' disabled type="primary" size="normal" @click="onClick('primary')">{{ text }}</nut-button>
    <nut-button style='margin-bottom: 10px' shape="square" disabled type="primary" size="normal" @click="onClick('primary')">{{ text }}</nut-button>
    <nut-button style='margin-bottom: 10px' loading type="warning" size="normal" @click="onClick('warning')">加载ing...</nut-button>
    <nut-notify></nut-notify>
  </view>
</template>

<script lang="ts" setup>
const notify = useNotify();

const text = ref("你好👋");
const textWarning = ref("🐶👋");

function onClick(type: 'primary' | 'warning' | 'danger' | 'success') {
  notify[type]("欢迎使用 nutui-uniapp");
}

setTimeout(() => {
  notify.primary("欢迎使用 nutui-uniapp");
}, 1000);
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 160rpx;
  height: 160rpx;
  margin: 200rpx auto 50rpx;
}
</style>
